<template>
<!-- 新建档案 -->
   <div>
        <el-row>
           <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div class="kuang"></div>
                    <span style=" padding-left:40px;font-size:15px;">新建档案</span>
                    <div class="xian"></div>
                    <el-form :inline="true" label-width="180px" :model="formInline" class="demo-form-inline" style="padding-top:30px;">
                        <el-form-item label="档案号">
                            <el-input v-model="formInline.user" placeholder="请输入" style="width:350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="所属案卷">
                            <el-select v-model="formInline.region" placeholder="所属案卷" style="width:350px;">
                            <el-option label="CRM系统项目" value="1"></el-option>
                            <el-option label="CRM系统项目" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="全宗号">
                            <el-input v-model="formInline.user" :disabled="true" placeholder="请输入" style="width:350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="全总名称">
                            <el-input v-model="formInline.user" :disabled="true" placeholder="请输入" style="width:350px;"></el-input>
                        </el-form-item>
                         <el-form-item label="库号">
                            <el-input v-model="formInline.user" :disabled="true" placeholder="请输入" style="width:350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="案库名称">
                            <el-input v-model="formInline.user" :disabled="true" placeholder="请输入" style="width:350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="保密等级">
                            <el-select v-model="formInline.region" placeholder="请选择" style="width:350px;">
                            <el-option label="绝密" value="1"></el-option>
                            <el-option label="机密" value="2"></el-option>
                            <el-option label="内部公开" value="3"></el-option>
                            <el-option label="公开" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                         <el-form-item label="案卷号">
                            <el-input v-model="formInline.user" :disabled="true" placeholder="请输入" style="width:350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="文件标题">
                            <el-input v-model="formInline.user"  placeholder="请输入" style="width:350px;"></el-input>
                        </el-form-item>
                        <el-form-item label="文号">
                            <el-input v-model="formInline.user"  placeholder="请输入" style="width:350px;"></el-input>
                        </el-form-item>
                        <br/>
                        <el-form-item label="责任人">
                            <!-- 选择抄送人start -->

                                    <div class="avatar-uploader">
                                        <!-- 选中负责人后展示start -->
                                        <div v-if="selectedUser != ''">
                                            <img :src="selectedUser.icon" class="avatar" @click="headPage = true">
                                            <span style="position: relative;top: -17px;left: 20px;">{{selectedUser.nickName }}
                                                <span style="margin-left: 26px;cursor: pointer;"
                                                    @click="deUser">X</span>
                                            </span>
                                        </div>
                                        <!-- 选中抄送人后展示end -->
                                        <!-- 负责人未选中展示 -->
                                        <i v-else @click="headPage = true" class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>


                                    <el-dialog v-loading="loading" element-loading-text="拼命加载中"
                                        element-loading-spinner="el-icon-loading"
                                        element-loading-background="rgba(0, 0, 0, 0.8)" :visible.sync="headPage"
                                        width="50%" :show-close="false">
                                        <el-breadcrumb separator-class="el-icon-arrow-right">
                                            <!-- 步骤条start -->
                                            <el-breadcrumb-item v-for="(value, index) in headNavs" :key="index"
                                                @click="upNav(index)">
                                                <el-button v-if="persons.id == undefined" size="mini" style="border: 0px;"
                                                    @click="upNav(index)">{{ value }}</el-button>
                                            </el-breadcrumb-item>
                                            <!-- 步骤条end -->
                                            <br>
                                            <br>
                                            <br>
                                            <!-- 展示右边所选中的用户start -->
                                            <div style="float: right;margin-top: -70px;margin-right:30%;color: black;">
                                                已选择<span v-if="selectedUser != ''">1</span><span v-else>0</span>位联系人
                                                <br>
                                                <br>
                                                <br>
                                            </div>
                                            <!-- 展示选中的用户 -->
                                            <div v-if="selectedUser != ''" class="architecture"
                                                style="height: 50px;float: right;    position: relative;top: 12px;right: 50px;">
                                                <img style="width: 30px;height: 30px;position: relative;top: 10px;"
                                                    :src="selectedUser.icon" />
                                                <span
                                                    style="margin-left: 17%;color: black;color: black;font-size: 10px;display: block;margin-top: -20px;">
                                                    {{ selectedUser.nickName }}<br><br>
                                                    {{ selectedUser.tposition.deptName }}
                                                    <span
                                                        style="float: right;margin-top: -10px;margin-right: 20px;cursor: pointer;"
                                                        @click="deUser">X</span>
                                                </span>

                                            </div>
                                            <!-- 展示右边所选中的用户end -->
                                            <!-- 展示左边信息start -->
                                            <!-- 展示部门和人数start -->
                                            <div class="architecture" style="line-height: 39px;"
                                                v-for="(value, perIndex) in persons" :key="perIndex"
                                                @click="selectArchitecture(value.deptName)">
                                                <div class="log">
                                                    <img
                                                        src="https://cdn7.axureshop.com/demo2023/2236859/images/%E8%AF%B7%E5%81%87/u2303.svg" />
                                                </div>
                                                <span style="margin-left: 5%;color: black;">
                                                    {{ value.deptName }}
                                                </span>
                                                &nbsp;&nbsp;&nbsp;({{ value.deptCount }})
                                                <span style="float: right;margin-right: 20px;">
                                                    ＞
                                                </span>
                                            </div>
                                            <!-- 展示部门和人数end -->
                                            <br>
                                            <!-- 展示当前所选部门的所有用户start -->
                                            <div v-if="users.length != 0">
                                                <div :class="[selectArchitectureCss != userIndex ? 'architecture' : '', selectArchitectureCss == userIndex ? 'architectureActe' : '']"
                                                    style="height: 50px;" v-for="(myUser, userIndex) in users"
                                                    :key="userIndex" @click="selectUser(userIndex)">
                                                    <el-radio style="width: 80%;height: 100%;" v-model="selectId"
                                                        :label="userIndex">
                                                        &nbsp;&nbsp;&nbsp;
                                                        <img style="width: 30px;height: 30px;position: relative;top: 10px;"
                                                            :src="myUser.icon" />
                                                        <span
                                                            style="margin-left: 5%;color: black;font-size: 10px;float: left;position: relative;top: 12px;left: 110px;">
                                                            {{ myUser.nickName }}<br><br>
                                                            {{ myUser.tposition.deptName }}
                                                        </span>

                                                    </el-radio>
                                                    <span>
                                                        ＞
                                                    </span>
                                                </div>
                                            </div>
                                            <!-- 展示当前所选部门的所有用户start -->
                                            <!-- 展示左边信息end -->

                                        </el-breadcrumb>

                                        <!-- 竖直分割线 -->
                                        <div class="myHr"></div>


                                        <span slot="footer" class="dialog-footer">
                                            <el-button @click="headPage = false">取 消</el-button>
                                            <el-button type="primary" @click="headPage = false">确 定</el-button>
                                        </span>
                                    </el-dialog>
                                    <!-- 选择负责人end -->
                        </el-form-item>
                        <br/>
                         <el-form-item label="活动形式">
                            <el-input type="textarea" v-model="formInline.desc" :rows="4" style="width:350px;"></el-input>
                        </el-form-item>
                        <div class="kuang"></div>
                        <span style=" padding-left:40px;font-size:15px;">销毁记录</span>
                        <div class="xian"></div>
                        <br/><br/>
                        <el-form-item label="销毁状态">
                            <el-select v-model="formInline.region1" placeholder="所属案卷" style="width:350px;">
                            <el-option label="未销毁" value="1"></el-option>
                            <el-option label="已销毁" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="销毁时间">
                             <el-date-picker
                            v-model="formInline.value1"
                            type="datetime"
                            placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <div class="kuang"></div>
                        <span style=" padding-left:40px;font-size:15px;">借阅记录</span>
                        <div class="xian"></div>
                        <br/><br/>
                        <el-form-item label="借阅状态">
                            <el-select v-model="formInline.region1" placeholder="所属案卷" style="width:350px;">
                            <el-option label="未借出" value="1"></el-option>
                            <el-option label="已借出" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <br/>
                        <el-form-item label="借阅记录">
                        </el-form-item>
                        <br/>
                        <el-form-item style="padding-left:1000px;">
                            <el-button >取消</el-button>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
   </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            formInline: {
               head:"",//负责人
            },
             // 获取抄送人start
            headPage: false,//开启选择抄送人页面
            headNavs: ["组织架构"],//步骤条
            persons: [],//部门和部门人数
            users: [],//所选部门的人员
            loading: false,//加载开启和关闭
            selectArchitectureCss: -1,//选中指定行后开启指定的css
            selectId: -1,//单选框
            selectedUser: "",//选中的用户
            //  获取抄送人end
        }
    },
    created(){
     this.getDept();//获取部门
    },
    methods: {
         // 负责人start
        // 更新步骤条
        upNav(index) {
            this.headNavs = this.headNavs.slice(0, index + 1);
            if ("组织架构" == this.headNavs) {
                this.loading = true;
                this.users = [];
                this.getDept();
            }
        },
        // 获取部门及部门人数
        getDept() {
            this.selectId = -1;
            this.deUser();
            axios.post("/ReplacementCard/findDept")
                .then((res) => {
                    this.persons = res.data.rows;
                    this.loading = false;
                })
        },
        // 获取所选择部门的用户信息
        selectArchitecture(value) {
            this.loading = true;
            this.persons = [];
            this.headNavs.push(value);
            var data = new FormData();
            data.append("name", value)
            axios.post("/ReplacementCard/findUserAndDept", data)
                .then((res) => {
                    this.users = res.data.rows;
                    if (this.users != []) {
                        this.loading = false;
                    }
                })

        },


        // 选中用户
        selectUser(index) {
            this.selectArchitectureCss = index;
            this.selectedUser = this.users[index];
            this.formInline.head = this.selectedUser.id;
        },
        // 删除用户
        deUser() {
            this.selectId = -1;
            this.selectedUser = "";
            this.selectArchitectureCss = -1;
            this.formInline.head = "";
        },
        // 负责人end
    }

}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: white;
    height: 1200px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .kuang {
    width: 4.5px;
    height: 25px;
    background-color: #409EFF;
    margin-left: 30px;
    position: relative;
    top: 23px;
}

.xian {
    width: 1200px;
    height: 2px;
    background-color: #EBEEF5;
    margin-left: 40px;
    margin-top: 15px;

}
 /* 获取负责人start */
    .architecture{
        width: 271px;
        height: 39px;
        padding-left: 20px;
        border-radius: 5px;
    }
    .architecture:hover{
        background-color: #f8f8f8;
    }
    .architectureActe{
        width: 271px;
        height: 39px;
        line-height: 39px;
        padding-left: 20px;
        border-radius: 5px;
        background-color: rgba(231, 244, 255, 1);;
    }
    /* 竖着的水平线 */
    .myHr{
        border-left: 2px solid#989DAA;;
        height:100%;
        left: 48%;
        top: 0px;
        position: absolute;
    }

    .log{
        width: 27px;
        height: 27px;
        background-color: rgba(158, 208, 255, 1);
        float: left;
        position: relative;
        top: 15%;
        border-radius: 50%;
    }
    .log img{
        width: 13px;
        height: 13px;
        position: relative;
        bottom: 15%;
        left: 25%;
    }
    .avatar-uploader-icon[data-v-3719bc3e]{
        border: 1px solid rgba(198, 201, 208, 1);
        background-color: rgba(248, 248, 248, 1);
        border-radius: 50%;
    }
    .avatar-uploader-icon {
        font-size: 20px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    /* 获取负责人end */
</style>